<template>
  <div id="zone">
    <!-- 导航栏 -->
    <div class="zone-nav">
      <router-link to="/my" class="nav-left">
        <img src="../assets/my-icon/zuojiantou.png" alt="" />
      </router-link>
      <router-link to="/" class="nav-right">
        <img src="../assets/my-icon/ddd.png" alt="" />
      </router-link>
    </div>
    <!-- 用户信息 -->
    <div class="user-zone">
      <div class="user-info">
        <div class="user-bg"></div>
        <div class="info">
          <div class="user-header">
            <div class="header-pic">
              <img src="/header_img/touxiang.jpg" alt="" />
            </div>
          </div>
          <div class="right-info">
            <div class="info-right">
              <div class="info-name">
                <b>冉冉冉冉冉木木</b>
              </div>
              <div class="user-gz">
                <span class="num">0</span>
                <span class="word">关注</span>
              </div>
            </div>
            <p class="user-sign">
              我是一只可爱的青花鱼，但是我很懒，我没有留下签名～
            </p>
          </div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="user-area">
        <!-- 收藏 -->
        <div class="user-item strong_push">
          <div class="head-string">
            <span class="title">收藏作品</span>
            <span class="num">0</span>
          </div>
          <div class="books_push">
            <books-vertical />
            <books-vertical />
            <books-vertical />
            <books-vertical />
            <books-vertical />
          </div>
        </div>
        <!-- 订阅 -->
        <div class="user-item">
          <div class="head-string">
            <span class="title">订阅作品</span>
            <span class="num">0</span>
          </div>
          <div class="list">
            <books-vertical />
          </div>
        </div>
        <!-- 订阅 -->
        <div class="user-item">
          <div class="head-string">
            <span class="title">书单</span>
            <span class="num">0</span>
          </div>
          <div class="list">
            <books-vertical />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BooksVertical from "@/components/BooksVertical.vue";
export default {
  components: { BooksVertical },
};
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.zone-nav {
  background: rgba(255, 255, 255, 0);
  position: fixed;
  top: 0;
  width: 100%;
  height: 2.6rem;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 1.11rem 0 1.11rem;
}

.nav-left {
  display: flex;
  justify-content: center;
  width: 2.26rem;
  height: 2.26rem;
  line-height: 1.13rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  color: #fff;

  img {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0.5rem 1rem;
  }
}

.nav-right {
  display: flex;
  justify-content: center;
  width: 2.26rem;
  height: 2.26rem;
  line-height: 1.1200298675rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  color: #fff;

  img {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0.5rem 1rem;
  }
}

.user-info {
  .user-bg {
    width: 100%;
    height: 40vw;
    background: url(http://localhost:8080/img/author_bg.8059a95c.jpg) no-repeat right;
    background-size: cover;
  }

  .info {
    display: flex;
    align-items: center;
    padding: 0 1rem;

    .user-header {
      width: 6.2rem;
      height: 6.2rem;

      .header-pic {
        position: absolute;
        border-radius: 50%;
        width: 6.2rem;
        height: 6.2rem;

        img {
          width: 100%;
          position: relative;
          top: -0.83rem;
          border-radius: 50%;
        }
      }
    }

    .right-info {
      position: relative;
      top: -0.3rem;
      flex: 1;
      min-width: 0;
      margin-left: 1.175rem;
      overflow: hidden;
      width: 100%;

      .info-right {
        display: flex;
        justify-content: space-between;
      }

      .info-name {
        width: 70%;
        display: flex;
        align-items: center;
        vertical-align: middle;
        font-size: 1.16rem;

        b {
          font-weight: 700;
          margin-right: 0.2rem;
          color: inherit;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: block;
        }
      }

      .user-gz {
        flex: 1;
        text-align: right;
        margin-left: 0.81rem;
        width: 30%;
      }

      .user-sign {
        font-size: 0.59rem;
        margin-top: 0.5rem;
        color: #8f8f9e;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.user-item {
  padding: 0 1.26rem;
  margin-top: 1.26rem;

  .head-string {
    position: relative;
    display: flex;
    align-items: center;

    .title {
      font-size: 1rem;
      color: #333;
      line-height: 1.5;
    }

    .num {
      font-size: 0.95rem;
      color: #8f8f9e;
      margin-left: 0.82rem;
    }
  }
}
</style>